<template>
	<view class="content">
		<view class="content1">
			<view class="text">
				<textarea type="text" class="input" placeholder="请添加备注" v-model="combinedText" rows="4"></textarea>
			</view>
			<view class="btn">
				<button class="success" @click="saveText">完成</button>
			</view>
		</view>
		<view class="content2">
			快捷标签
		</view>


		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 20px" justify="space-between" gutter="10">
					<u-col span="6">
						<view class="demo-layout bg-purple-light" @click="selectNote(0)">{{note[0]}}</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout " @click="selectNote(1)">{{note[1]}}</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20px" justify="space-between" gutter="10">
					<u-col span="4">
						<view class="demo-layout " @click="selectNote(2)">{{note[2]}}</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout " @click="selectNote(3)">{{note[3]}}</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout " @click="selectNote(4)">{{note[4]}}</view>
					</u-col>
				</u-row>

				<u-row customStyle="margin-bottom: 20px" justify="space-between" gutter="10">
					<u-col span="3">
						<view class="demo-layout" @click="selectNote(5)">{{note[5]}}</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout " @click="selectNote(6)">{{note[6]}}</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout" @click="selectNote(7)">{{note[7]}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		data() {
			return {
				note: ['上门回收时请先拨打电话', '回收物品放在门口了', '请尽快上门', '不方便接电话', '需要袋子', '需要袋子', '物品比较重', '需要多人上门'],
				noteList: '',
				inputText: '',
				savedTexts: [],
				id: '',

			}
		},
		onLoad(options) {
			// this.type = options["type"];

			this.id = options["id"];
		},
		computed: {
			combinedText: {
				get() {
					return this.inputText + this.savedTexts.join(', ');
				},
				set(value) {
					const splitValue = value.split(', ');
					this.inputText = splitValue[0];
					this.savedTexts = splitValue.slice(1);
				}
			}
		},
		methods: {
			selectNote(noteList) {
				this.savedTexts.push(this.note[noteList]);
			},
			saveText() {
				this.savedTexts.push(this.inputText);
				this.inputText = '';


				let params = {


					remark: this.combinedText,

					id: this.id

				}
				OrderApi.queryRemark(params).then(res => {
					uni.navigateTo({

						url: '/pages/orderform/orderform'
					});

				})



			}
		}
	}
</script>


<style lang="scss">
	.input {
		width: 100%;
		line-height: 35px;
		font-size: 18px;
		word-break: break-word;
		height: 350rpx;
	}

	.content1 {
		height: 500rpx;
		width: 94%;
		margin: 0 auto;
		background-color: #FBFBFB;
		border: 1px solid #E4E4E4;
		border-radius: 20rpx;
		box-shadow: -1rpx 3rpx 8rpx #666;

		.text {
			height: 350rpx;
			margin-top: 30rpx;
			padding: 0 20rpx;
			flex-wrap: wrap;
		}

		.btn {
			width: 100%;
			position: relative;

			.success {
				width: 200rpx;
				position: absolute;
				right: 20rpx;
				color: #4AAF83;
			}
		}
	}

	.content2 {
		margin-top: 60rpx;
		padding: 0 40rpx;
		font-size: 18px;
	}

	.u-demo-block {
		padding: 30rpx 40rpx;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-radius: 4px;
		border: 1px solid #E4E4E4;
	}
</style>